<template>
	<view class="wrap">
		<view class="study-time-card">
			<u-row gutter="16" justify="space-between">
				<u-col span="6">
					<view class="demo-layout">
						<view class="study-time">{{ courseList.allCourseStudiedSeconds }}<text v-if="courseList.allCourseStudiedSeconds === 0">--</text></view>
						<view class="study-mge">学习总时长</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout">
						<view class="study-time">{{ lastTime }}</view>
						<view class="study-mge">上一次学习时间</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- <u-search input-align="center" height="70" bg-color="#fff" border-color="#2979FF"></u-search> -->
		<view class="study-time-card" style="background-color: #eeeeee">
			<view class="course-list" @click.stop="kmsToPath(item)" v-for="(item, index) in courseList.list" :key="index">
				<view class="course-img">
					<text v-if="item.images === null">暂无封面</text>
					<u-image :src="item.images" width="100%" height="100%" v-if="item.images"></u-image>
				</view>
				<view class="course-title">
					<view class="demo-layout" style="top: 50%; position: absolute; transform: translateY(-50%); width: 100%">
						<view class="courseTitle">{{ item.title }}</view>
						<view class="update-time">更新时间：{{ item.updateTime }}</view>
					</view>
				</view>
			</view>
			<u-empty text="暂无课程" mode="list" style="background-color: #fff" v-if="courseList.list && courseList.list.length === 0"></u-empty>
		</view>
		<view class="footer">
			<uni-pagination v-if="totalNum >= 5" style="width: 100%" @change="handlePage" show-icon="true" :total="totalNum" pageSize="5" :current="currentPage"></uni-pagination>
		</view>
	</view>
</template>

<script>
import { KmsCourseList } from '@/api/kms/course.js';
import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
export default {
	data() {
		return {
			src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
			courseList: {},
			lastTime: '',
			totalNum: 0,
			currentPage: 1,
		};
	},
	components: {
		uniPagination,
	},
	computed: {},
	onLoad() {},
	onShow() {
		this.getcourseList();
	},
	watch: {},
	methods: {
		kmsToPath(item) {
			uni.navigateTo({
				url: '/pages/kmsManagement/kmsFunList/course/courseLog?courseId=' + item.courseId + '&label=' + 102,
			});
		},
		getcourseList() {
			let self = this;
			let params = {
				page: this.currentPage,
				limit: 5,
			};
			KmsCourseList(params).then((res) => {
				// self.listData = res.data;
				// self.showListData = res.data;
				self.courseList = res.data;
				var lastTime = new Date(self.courseList.lastStudyTime).getTime();
				self.lastTime = self.getDateDiff(lastTime);
				self.totalNum = self.courseList.totalRow;
			});
		},
		// 上一次学习时长
		getDateDiff(dateTimeStamp) {
			var result = '';
			var minute = 1000 * 60;
			var hour = minute * 60;
			var day = hour * 24;
			var halfamonth = day * 15;
			var month = day * 30;

			var now = new Date().getTime();
			var diffValue = now - dateTimeStamp;

			var monthC = diffValue / month;
			var weekC = diffValue / (7 * day);
			var dayC = diffValue / day;
			var hourC = diffValue / hour;
			var minC = diffValue / minute;
			if (!dateTimeStamp) {
				result = '未学习';
			} else if (monthC >= 12) {
				result = '超过一年未学习';
			} else if (monthC >= 1) {
				result = parseInt(monthC) + '个月前';
			} else if (weekC >= 1) {
				result = parseInt(weekC) + '星期前';
			} else if (dayC >= 1) {
				result = parseInt(dayC) + '天前';
			} else if (hourC >= 1) {
				result = parseInt(hourC) + '小时前';
			} else if (minC >= 1) {
				result = parseInt(minC) + '分钟前';
			} else result = '刚刚';
			return result;
		},
		handlePage(params) {
			this.currentPage = params.current;
			this.getcourseList();
		},
	},
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 24rpx;
}
.study-time-card {
	border-bottom: 1px solid #eeeeee;
	margin-bottom: 10px;
	// background-color: #EEEEEE;
}

.u-row {
	margin: 40rpx 0;
}

.demo-layout {
	// height: 100rpx;
	border-radius: 8rpx;
}

.bg-purple {
	background: #d3dce6;
}

.bg-purple-light {
	background: #e5e9f2;
}

.bg-purple-dark {
	background: #99a9bf;
}
.study-time {
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: #1870c9;
	margin-bottom: 20rpx;
}
.study-mge {
	text-align: center;
	font-size: 12px;
	color: #999999;
}
.courseTitle {
	font-size: 40rpx;
	font-weight: 600;
}
.update-time {
	font-size: 20rpx;
	margin-top: 20px;
	color: #999999;
}
.course-list {
	display: flex;
	height: 240rpx;
	text-align: center;
	background-color: #82848a;
	margin-top: 20rpx;
	align-items: center;
}
.course-img {
	width: 240rpx;
	height: 240rpx;
	line-height: 240rpx;
	background-color: #ecf5ff;
	// padding: 50% 0;
}
.course-title {
	background-color: #ffffff;
	width: 66%;
	height: 240rpx;
	position: relative;
}
.footer {
	/deep/ .uni-pagination__btn {
		background: #fff;
		opacity: 1;
		border-radius: 5px;
	}
}
</style>
